<template>
	<view class="container">
		<view class="service-body" v-for="(item,index)  in listData" :key="index" @click="Pageservice(item)">
			<view class="service-cost">
				<image :src="item.img" mode="widthFix" class="conten-img"></image>	
				<view class="service-text">
					<text>{{item.text1}}</text>
					<text>{{item.text2}}</text>
				</view>
				<text>{{item.text3}} </text>	
			</view>
           <view class="service-btn">
            	<button type="default" size="mini" class="btn-1">{{item.btn1}}</button>
				<button type="default" size="mini" class="btn-1">{{item.btn2}}</button>
            </view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				listData: [{
					text1: "助医服务",
					text2: "￥38",
					text3:"已完成",
					img: "../../../static/img/lifajiandao.png",
					btn1:"再来一单",
					btn2:"评价"
				},
				{
					text1: "助医服务",
					text2: "￥38",
					text3:"陪护员据您520m",
					img: "../../../static/img/lifajiandao.png",
					btn1:"联系陪护员",
					
				},
				{
					text1: "助医服务",
					text2: "￥38",
					text3:"已取消",
					img: "../../../static/img/lifajiandao.png",
					btn1:"再来一单",
					
				},
				{
					text1: "助医服务",
					text2: "￥38",
					text3:"代付款",
					img: "../../../static/img/lifajiandao.png",
					btn1:"取消订单",
					btn2:"付款"
				},
				{
					text1: "助医服务",
					text2: "￥38",
					text3:"退款中",
					img: "../../../static/img/lifajiandao.png",
					btn1:"再来一单",
					btn2:"退款进度"
				},
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.container {
		flex-direction: column;
		width: 100%;
		display: flex;
		align-items: center;

	}

	.service-body {
		width: 94%;
		height: 140px;
		margin-bottom: 8px;
		box-shadow: 0 0 4px #555153;
		border-radius: 4px;
		margin-top: 10px;
	}

	.conten-img {
		width: 50px;
		height: 50px;
		border: 1px solid #007AFF;
		border-radius: 50px;
		background-color: #007AFF;
	}

	image {
		width: 100%;
		height: 100%;

	}

	.service-text {
		flex-direction: column;
		display: flex;
		align-items: center;
		
	}

	.service-cost {
		flex-direction: row;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20px;

	}
	.service-btn{
	     border-top: 1px solid #007AFF;
		 margin-top: 10px;
		 margin-bottom: 8px;
         display: flex;
		 flex-direction: row;
		 height: 40px;
		 width: 100%;
		justify-content: flex-end;
        align-items: center;
	}
	.btn-1{
		// background-color: #007AFF;
		margin-top: 10px;
	}
</style>
